<template>
	<view class="content">
		<view class="goods">
			<view>
				<u-swiper
						:list="goodsInfo.images"
						:indicator="true"
						height="300"
						@change=""
						@click=""
				></u-swiper>
			</view>
			<view class="goodsPrice flex">
				<view class="flex vipPrice">
					<view class="chinaZn">￥</view>
					<view class="zero">0.00</view>
					<view class="vipLogo">会员价</view>
				</view>
				<view class="flex goodsSaleInfo">
					<view class="flex">
						<view>原价：</view>
						<view class="priceLine">{{goodsInfo.price}}</view>
					</view>
					<view>{{goodsInfo.show_buyer_count}}人已购买</view>
				</view>
			</view>
			<view class="goodsTitle">
				<view class="title">{{goodsInfo.title}}</view>
				<view class="subtitle">{{goodsInfo.subtitle}}</view>
			</view>
		</view>
		<view class="info">
			<u-divider
					customStyle="width:400rpx; margin-left:20%;"
			        text="商品详情"
			        textColor="#888888"
			        lineColor="#888888"
			></u-divider>
			<view style="width: 100%;" v-html="content"></view>
		</view>
		<view class="bottomNavFixed">
			<view class="bottomNav flex">
				<view @click="home">
					<view class="homeIcon"><u-icon name="home" size="30" ></u-icon></view>
					<view>首页</view>
				</view>
				<view class="share" >
					<button open-type="share" class="mini-btn">
						<u-icon name="share" class="shareIcon" size="30" ></u-icon>
						<view>分享</view>
					</button>
				</view>
				<view>
					<view class="contact" @click="contact">预约</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import http from '@/apis/http.js'
	export default {
		data() {
			return {
				goodsInfo:{},
				goodsId:0,
				content:"",
			}
		},
		methods: {
			home(){
				uni.navigateTo({
					url:'/pages/index/index'
				})
			},
			getGoodsInfo(){
				console.log('aaa',this.goodsId)
				http.POST('goods/info',{'goodsId':this.goodsId}).then(res=>{
					if(res.code == 1){
						this.content = res.data.content.replace(/\<img/gi, '<img class="rich-img"');
			
						this.goodsInfo = res.data
						
						
	

					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			},
			contact(){
				http.POST('order/contact',{'goodsId':this.goodsId}).then(res=>{
					if(res.code == 1){
						uni.reLaunch({
							url:'/pages/order/reservation?goodsId='+this.goodsId
						})
						return;
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						});
						// 去购买
						setTimeout(()=>{
							uni.reLaunch({
								url:'/pages/vipCard/buyVip'
							})
						},1000)
					}
				})
			},
			shareMsg(){
				uni.showShareMenu({
					success(e) {
						console.log(e)
					},
					fail(e) {
						console.log(e)
					}
				})
			}
		},
		onLoad(option) {
			this.goodsId = option.goodsId;
			this.getGoodsInfo();
		},
		created() {
			
		}
	}
</script>

<style>
	.content {
		padding: 0 20rpx;
	}
	.bottomNavFixed {
		position: fixed;
		bottom: 0;
		z-index: 1000;
		background-color: #fff;
	}
	.bottomNav {
		display: flex;
		padding: 20rpx;
		align-items: center;
		font-size: 20rpx;
		text-align: center;
	}
	.bottomNav .share {
		margin: 0 10rpx 0 50rpx;
	}
	.flex{display: flex;}
	.contact {
		color: #fff;
		margin-left: 70rpx;
		width: 400rpx;
		height: 70rpx;
		line-height: 70rpx;
		background-color: #5db6a4;
		border-radius: 50rpx;
		text-align: center;
		font-size: 35rpx;
	}
	.goodsPrice{
		flex-direction: column;
		padding: 30rpx 30rpx;
		background-color: red;
		border-radius: 0 0 20rpx 20rpx;
	}
	.vipPrice{ color: #fff; align-items: flex-end; margin-bottom: 20rpx;}
	.vipPrice .chinaZn { font-size: 22rpx;}
	.vipPrice .zero { font-size: 50rpx;}
	.vipPrice .vipLogo { align-self: center; margin-left: 10rpx; background-color: #5cb9a4; border-radius: 0 20rpx 20rpx 20rpx; font-size: 20rpx; padding: 3rpx 15rpx;}
	.goodsSaleInfo { color: #fff; font-size: 25rpx; margin-bottom: 20rpx; justify-content: space-between;}
	.goodsSaleInfo .priceLine { text-decoration:line-through;}
	.goodsTitle .title { margin: 20rpx 0;}
	.goodsTitle .subtitle { font-size: 25rpx;}
	
	.info { min-height: 500rpx;}
	button::after {
	  border: none;
	  background-color: transparent !important;
	}
	.mini-btn { font-size: 25rpx; line-height:35rpx !important; background-color: transparent !important;}
	.shareIcon {}
	/*覆盖文本编辑器里面的图片的大小*/
	uni-rich-text img {
		max-width: 100% !important;
		vertical-align:middle !important;
	}
			
	.rich-img{
		vertical-align: middle !important;
	
	}
</style>
